<template>
  <div class="app-container">
    <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
      <el-step title="课程基本信息" ></el-step>
      <el-step title="课程章节小节" ></el-step>
      <el-step title="最终发布" ></el-step>
    </el-steps>
    <el-row style="margin-top: 20px">
      <el-button type="primary" @click="chapterDialogFormVisible = true">添加章节</el-button>
    </el-row>

    <div class="chapterVideo">
      <div>
        <dl v-for="(chapter,i) in chapterList" :key="i">
          <dt @click="isShow==i?isShow=-1:isShow=i" style="height: 60px;">
            <p style="float: left;color: red;font-size: 20px;font-weight: bold">{{chapter.title}}</p>
            <span style="display: inline-block;float: right;margin-top: 5px">
              <el-button type="primary" @click="addVideoShow(chapter.id)">添加小节</el-button>
              <el-button type="primary" @click="editChapter(chapter.id)">编辑章节</el-button>
              <el-button type="danger" >删除章节</el-button>
            </span>

          </dt>
          <dd v-for="video in chapter.children" v-if="isShow==i">
            {{video.title}}
          </dd>
        </dl>
      </div>

      <!--章节框-->
      <el-dialog title="添加章节" :visible.sync="chapterDialogFormVisible">
        <el-form :model="chapter">
          <el-form-item label="章节名称" :label-width="formLabelWidth">
            <el-input v-model="chapter.title" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="chapterDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="chapterBtnOK">确 定</el-button>
        </div>
      </el-dialog>

      <!--小节框-->
      <el-dialog title="添加小节" :visible.sync="videoDialogFormVisible">
        <el-form :model="video">
          <el-form-item label="小节名称" :label-width="formLabelWidth">
            <el-input v-model="video.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上传视频">
            <el-upload
              :on-success="handleVodUploadSuccess"
              :on-remove="handleVodRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :action="BASE_API+'/video/uploadAlyVideo'"
              :limit="1"
              class="upload-demo">
              <el-button size="small" type="primary">上传视频</el-button>

            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="videoDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="videoBtnOK">确 定</el-button>
        </div>
      </el-dialog>


    </div>


    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>

</template>

<script>
  import chapter from '@/api/chapter'

  export default {
    name: "info",
    data() {
      return {
        courseId:this.$route.params.id,//课程id
        chapterList:[],//章节列表其中包含小节
        isShow:0,//显示控制
        chapter:{},//添加章节对象
        chapterDialogFormVisible:false,//章节框
        video:{},//小节对象
        videoDialogFormVisible:false,//小节框
        BASE_API:process.env.VUE_APP_BASE_API,//ip 端口号请求前缀
      };
    },

    methods: {
      next() {
        this.$router.push({path:'/course/publish/'+this.courseId})
      },
      prev(){
        this.$router.push({path:'/course/edit/'+this.courseId})
      },
      //显示添加小节窗口
      addVideoShow(id){
        this.videoDialogFormVisible = true//显示小节框
        this.video.chapterId = id//赋值章节id
      },
      //小节框确认按钮
      videoBtnOK(){
        this.video.courseId = this.courseId//赋值课程id
        //添加小节
        chapter.addVideo(this.video)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '添加小节成功!'
            });
            this.video={}//清空小节对象
            this.videoDialogFormVisible = false//关弹框
            //重查数据
            this.getList()

          })
      },
      //调用接口删除视频
      handleVodRemove(file, fileList) {
        console.log(file, fileList);
      },
      //视频上传成功
      handleVodUploadSuccess(response,file,fileList){
       //上传视频id赋值
        this.video.videoSourceId = response.data.videoId
        //上传视频名称赋值
        this.video.videoOriginalName = file.name
      },
      //视频上传之前
      handleUploadExceed(){
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
      //删除视频之前
      beforeVodRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

      //根据课程id获取课程的章节小节
      getList(){
        chapter.getList(this.courseId)
          .then(response=>{
            this.chapterList = response.data.list
          })
      },
      //章节框确定按钮
      chapterBtnOK(){
        //判断章节对象是否存在id，存在便是修改操作，否则添加
        if(this.chapter.id){//修改
          this.updateChapter()
        }else{//添加
          this.addChapter()
        }

      },
      //修改章节
      updateChapter(){
        chapter.updateChapter(this.chapter)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '修改章节成功!'
            });
            this.chapter = {}//清空章节对象
            this.chapterDialogFormVisible = false
            //重新查询数据
            this.getList()
          })
      },

      //添加章节
      addChapter(){
        this.chapter.courseId = this.courseId
        chapter.addChapter(this.chapter)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '添加章节成功!'
            });
            this.chapterDialogFormVisible = false
            //重新查询数据
            this.getList()
          })
      },
      //根据章节id查询章节信息
      editChapter(id){
        chapter.getById(id)
          .then(response=>{
            this.chapterDialogFormVisible = true
            this.chapter = response.data.chapter
          })
      },
    },
    created() {
      //根据课程id获取课程的章节小节
      this.getList()
    }
  }
</script>

<style scoped>
  .chapterVideo dt{
    border: 1px solid;padding-left: 15px
  }
  .chapterVideo dd{
    font-size: 20px;margin-top: 10px;height: 40px;line-height: 40px;padding-left: 20px;margin :10px 0;border: 1px solid
  }

  .el-dialog__wrapper{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

</style>
